<template>
  <div class="">
    <div class="page__bd page__bd_spacing">
      <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" @change="swiperChange" @animationfinish="animationfinish">
        <div v-for="(item, index) in imgUrls" :key="index">
          <swiper-item>
            <image :src="item" class="slide-image" />
          </swiper-item>
        </div>
      </swiper>
    </div>

   <div class="weui-flex m-menu">
      <div class="weui-flex__item">
        <div class="placeholder">
           <img src="../../../static/images/board.png" background-size="cover" />
            <text>居家</text>
        </div>
      </div>
      <div class="weui-flex__item">
       <div class="placeholder">
           <img src="../../../static/images/board.png" background-size="cover" />
            <text>居家</text>
        </div>
      </div>
      <div class="weui-flex__item">
       <div class="placeholder">
           <img src="../../../static/images/board.png" background-size="cover" />
            <text>居家</text>
        </div>
      </div>
      <div class="weui-flex__item">
        <div class="placeholder">
           <img src="../../../static/images/board.png" background-size="cover" />
            <text>居家</text>
        </div>
      </div>
    </div>
    <div class="m-section">
      <h2>品牌制造商</h2>
      h
    </div>
  </div>
</template>

<script>
import api from "@/http/api";
export default {
  data() {
    return {
      motto: "Hello World111",
      userInfo: {},
      moiveList: [],
      movies: [],
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 900,
      circular: true,
      imgUrls: [
        "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg",
        "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg",
        "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg"
      ]
    };
  },
  methods: {
   
    bindgetuserinfo(e) {
      console.log(e);
      this.userInfo = e.target.userInfo;
    },
    getMusicList() {
      const params = {
        url: "/movie/douban",
        data: {
          apikey:
            "ZbmegB6RzaScMkuTiSdTXWD7VxqunUdILGGTyjGFAqssvIciKDMEyuuNFoJWUrq1",
          kw: "金刚"
        }
      };
      api.getMusicList(params)
        .then(res => {
          console.log(1, res);
          this.moiveList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    onPullDownRefresh() {
      wx.stopPullDownRefresh();
    }
  },
  created() {
    // 调用应用实例的方法获取全局数据
    // this.getMusicList();
    this.movies = [
      { url: "http://img7.doubanio.com/view/photo/l/public/p2505658993.jpg" },
      { url: "http://img7.doubanio.com/view/photo/l/public/p2505658993.jpg" }
    ];
  },
  components: {}
};
</script>

<style scoped>
.slide-image {
  width: 100%;
  height: 100%;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.counter {
  display: inline-block;
  margin: 10px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
.myMain {
  border: 1px solid #cccccc;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.myMain .flex-item {
  width: 280rpx;
  display: flex;
  flex-direction: column;
  padding: 5rpx 0rpx;
}
.photo {
  width: 280rpx;
  height: 280rpx;
}
img {
  max-width: 100%;
}
.music-name {
  font-size: 12px;
  line-height: 16px;
}
.m-menu .placeholder{
  text-align: center
}
.m-menu image{
  display: block;
  width: 58rpx;
  height: 58rpx;
  margin: 0 auto;
  margin-bottom: 12rpx;
}
.m-menu text {
  display: block;
  font-size: 24rpx;
  text-align: center;
  margin: 0 auto;
  line-height: 1;
  color: #333;
}
.m-section{
  margin-top: 10rpx;

}
.m-section h2{
  text-align: center;
  font-size: 16px
}
</style>
